<template>
<div>
  <el-card>
    <div>
      <el-row v-if="role_id != 3">
        <el-form ref="deviceForm" :model="deviceForm" label-width="85px" label-position="left">
          <el-col :span="8">
            <el-form-item label="房间编号：">
              <el-input v-model="deviceForm.rid" placeholder="请输入房间编号" :clearable=true></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="1">
            <el-form-item label="设备名称：">
              <el-input v-model="deviceForm.name" placeholder="请输入设备名称" :clearable=true></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item>
              <template>
                <el-button type="success" size="small" @click="onSearch">搜索</el-button>
                <el-button size="small" @click="onReset('deviceForm')">重置</el-button>
              </template>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <!--   表格-->
    <div class="content-header">
      <el-button v-if="role_id != 3" type="success" size="small" @click="handleAdd">添加</el-button>
    </div>
    <div>
      <el-table :data="deviceData" stripe style="width: 100%" :header-cell-style="{
      'background-color': '#fafafa',
      'color': 'rgb(103, 194, 58)',
      'border-bottom': '1px rgb(103, 194, 58) solid'}">
        <el-table-column prop="rid" label="房间编号"></el-table-column>
        <el-table-column prop="apt_id" label="公寓编号"></el-table-column>
        <el-table-column prop="id" label="设备编号"></el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="price" label="设备价格"></el-table-column>
        <el-table-column prop="dstatus" label="设备状态">
          <template slot-scope="scope">
            {{scope.row.dstatus === 10 ? '使用中' : scope.row.dstatus=== 20 ? '维护中' : '损坏'}}
          </template>
        </el-table-column>
        <el-table-column prop="report" label="报修状态">
          <template slot-scope="scope">
            {{scope.row.report === 10 ? '未报修' : '已报修'}}
          </template>
        </el-table-column>
        <el-table-column v-if="role_id != 3" label="操作">
          <template slot-scope="scope">
            <el-button v-if="role_id != 3" type="text"  @click="editClick(scope.row)" class="editButton">编辑</el-button>
            <el-button v-if="role_id != 3" type="text"  @click="deleteClick(scope.row.id)" class="deleteButton">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  分页-->
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[8, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination-warp">
      </el-pagination>
    </div>
  </el-card>
  <!--  添加房间子组件-->
  <add-device ref="add" @addClickBack="addBack"></add-device>
  <!--  修改房间信息子组件-->
  <edit-device ref="edit" @editClickBack="editBack"></edit-device>
</div>
</template>

<script>
    import AddDevice from "@/components/device/addDevice";
    import EditDevice from "@/components/device/editDevice";
    export default {
        name: "device",
      components: {EditDevice, AddDevice},
      data(){
          return{
            role_id: 3,
            deviceForm:{
              rid:'',
              name:''
            },
            deviceData:[],
            pagenum:1,//当前页数
            pagesize:10,//当前页有多少条数据
            total:100//总页数
          }
      },
      created(){
         this.getDeviceList()
         //获取当前用户对应的角色
         this.getCurrentUserRule()
      },
      methods:{
        //监听pagesize的改变事件
        handleSizeChange(newSize){
          this.pagesize=newSize
          this.getDeviceList()
        },
        //监听页码的变化
        handleCurrentChange(newPage){
          this.pagenum=newPage
          this.getDeviceList()
        },
        //获取当前用户角色对应的方法
        async getCurrentUserRule(){
          const {data:res} = await this.$http.post('/util/getJWTMessage', {
            "token": window.localStorage.getItem('token'),
            "keyName": "role_id"//获取的是当前角色对应的 rule_id
          })
          this.role_id = res.data
        },
        //获得设备信息
        async getDeviceList(){
          const {data:res} = await this.$http.post('/rDevice/getRDevices',{
            pageNum:this.pagenum,
            pageSize:this.pagesize
          })
          if (res.code !== 200){
            return this.$message.error("获取设备信息失败")
          }
          this.deviceData = res.data.list
          this.total = res.data.total
        },
        //表单搜索
        async onSearch(){
          const {data:res}=await this.$http.post('/rDevice/getRDevices',{
            pageNum:this.pagenum,
            pageSize:this.pagesize,
            rid:this.deviceForm.rid,
            name:this.deviceForm.name
          })
          if(res.code!==200) return this.$message.error('搜索失败')
          this.$message.success('搜索成功~')
          console.log(res.data)
          this.deviceData=res.data.list
          this.total=res.data.total
        },
        //表单重置
        onReset(){
          this.$refs.deviceForm.resetFields()
          this.getDeviceList()
        },
        //添加房间信息
        handleAdd(){
          this.$refs.add.init()
        },
        //  添加子组件的回调函数
        addBack(){
          this.getDeviceList()
        },
        //  修改房间信息
        editClick(row){
          console.log("kong",row)
          this.$refs.edit.init(row)
        },
        // 修改子组件的回调函数
        editBack(){
          this.getDeviceList()
        },
        //  删除房间信息

        //没有删除
        async deleteClick(id){

          const {data:res}= await this.$http.post('/rDevice/deleteRDevice/'+id)
          console.log(res)
          if(res.code!==200) return this.$message.error('删除员工信息失败！')
          this.$message.success('删除用户信息成功~')
          this.getDeviceList()
        }
      }
    }
</script>

<style scoped>

</style>
